<template>
<div class="ShopDetail_main_box">
  <!-- 快捷菜单 -->
  <div class="small_menu">
    <ul class="small_menu_list">
      <li class="small_menu_one top"><i class="iconfont icon-zhiding" title="置顶"></i></li>
      <li class="small_menu_one shopping_car" title="购物车"><router-link to="/shoppingCar" ><i class="iconfont icon-gouwuche" title="购物车"><span class="shopping_num">{{this.$store.getters.getShoppingCarNumber }}</span></i></router-link></li>
      <li class="small_menu_one collection"><i class="iconfont icon-jiaxingshoucang" title="收藏"></i>
      </li>
    </ul>
  </div>
  <div class="SHopDetail_box">
    <div class="Shopping_picture_main_box">
      <div class="Shopping_picture_left_div">
        <el-carousel trigger="click"  class="shopping_detailed_el-carousel">
          <el-carousel-item v-for="item in shopping_detailed_list.pics" :key="item" style="height:450px">
            <img :src="item.pics_mid" alt="商品图片" class="Shopping_picture_left_image">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="Shopping_picture_right_div">
        <div class="Shopping_theme_div">
          {{ shopping_detailed_list.goods_name }}
        </div>
<!--        价格-->
        <div class="Shopping_money_div">
          <div class="nonmal_money"><span style="font-size: 15px;color: #b24057">RMB￥</span>{{ shopping_detailed_list.goods_price }}</div>
          <div class="huiyuan_money"><span style="font-size: 15px;color: #b24057">VIP￥</span>{{ shopping_detailed_list.goods_price*0.88 }}</div>
        </div>
<!--        配送地址-->
        <div class="Shopping_address_div">
          配送至<button class="Shopping_select_address">请选择收货地址</button><div class="Shopping_address_show">广东省汕头市潮阳区</div>
          运费 <div style="font-size: 16px;">包邮</div>
        </div>
<!--        保障-->
        <div class="Shopping_Assure_div">
          保障:
          <ul class="Shopping_Assure_ul">
            <li class="Shopping_Assure_li">7天价保</li>
            <li class="Shopping_Assure_li">180天包换不退</li>
            <li class="Shopping_Assure_li">7天无理由</li>
            <li class="Shopping_Assure_li">运费险</li>
          </ul>
        </div>
<!--        数量-->
        <div class="Shopping_number_div">
          数量
          <div class="Shopping_number_select">
            <button class="Shopping_number_reduce" @click="shopping_num_reduce(shopping_detailed_list)">-</button>
            <input type="text" inputmode="numeric" pattern="[0-9]*"  name="" class="Shopping_number_input" :value="shopping_num">
            <button class="Shopping_number_add" @click="shopping_num_add(shopping_detailed_list)">+</button>
          </div>
          </div>
        <!--购买和购物车-->
        <div class="Shopping_buy_div">
          <button class="Shopping_buy_button">立刻购买</button>
          <button class="Shopping_car_button" @click="addShoppinglist(shopping_detailed_list)">加入购物车</button>
        </div>
      </div>
    </div>
    <div class="Shopping_introduce_main_box" v-html="shopping_detailed_list.goods_introduce"></div>
  </div>
</div>
</template>

<script>
import axios from "axios";
import {mapMutations } from 'vuex';
export default {
  name: "ShopDetailed",
  data(){
    return{
      shopping_num : 1,
    //  获取商品详细信息
      shopping_detailed_list:[]
    }
  },
  mounted() {
    const currentURL = this.$route.fullPath.split('/')[2]
    console.log(currentURL);
    this.GetshoppingDetailed(currentURL)
  },
  methods:{
    ...mapMutations(['addToCart','updateGoodsNumber']),
    //添加购物车
    addShoppinglist(goods){
      const good = {
        goods_id: goods.goods_id,
        goods_name: goods.goods_name,
        goods_count:this.shopping_num,
        goods_price: goods.goods_price,
        goods_small_logo:goods.goods_small_logo,
      //  被勾选的状态
        goods_state:true
      }
      this.addToCart(good)
    },

    shopping_num_reduce(){
      if (this.shopping_num > 0){
        this.shopping_num -=1
      }else {
        this.shopping_num = 0
      }

      // this.updateGoodsNumber(goods,this.shopping_num)
    },
    shopping_num_add(){
      this.shopping_num +=1
      // this.updateGoodsNumber(goods,this.shopping_num)
    },
  //  获取商品的id发送请求
    async GetshoppingDetailed(good_id){
      try {
        const shoppingDetailed = await axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/detail',{ params: { goods_id: good_id } })
        // console.log(shoppingDetailed.data.message)
        this.shopping_detailed_list = shoppingDetailed.data.message
        console.log(this.shopping_detailed_list)
      }catch (error){
        console.log(error)
      }

    },
  }
}

</script>

<style scoped>

</style>
